<template>
	<view class="flex-column container">
		<view class="flex-column top-view">
			<view class="wecome">
				欢迎来到教培系统!
			</view>
			<view class="flex-column user">
				<view class="flex-row name">
					<image class="name-image"
						:src="'/static/login/login_shoujihao_' + (userinfo.cName.length?'s.png':'n.png')"
						mode="scaleToFill">
					</image>
					<input class="name-input" placeholder="请输入账号" v-model="userinfo.cName" />
				</view>
				<view class="flex-row password">
					<image class="password-image"
						:src="'/static/login/login_mima_' + (userinfo.cPassword.length?'s.png':'n.png')"
						mode="scaleToFill"></image>
					<input class="password-input" password placeholder="请输入密码" v-model="userinfo.cPassword" />
				</view>
			</view>
		</view>
		<view class="flex-column bottom-view">
			<view class="flex-row login" @click="loginClick">登 录</view>
			<view class="findpassword">
				忘记密码?
			</view>
			<view class="flex-row agree-view">
				<image class="agree-image"
					:src="agreeStatus?'/static/common/common_xuanze_big_yidagou.png':'/static/common/common_xuanze_big_weixuan.png'"
					mode="scaleToFill" @click="agreeClick">
				</image>
				<view class="agree-tip" @click="agreeClick">
					我已阅读并同意
				</view>
				<navigator class="agree-content"
					url="/pages/webview/webview?url=https://an.xinggongcheng.com/policy/userPolicy.html&title=用户服务协议">
					用户服务协议
				</navigator>
				<view class="agree-tip">
					、
				</view>
				<navigator class="agree-content"
					url="/pages/webview/webview?url=https://an.xinggongcheng.com/policy/androidPolicy.html&title=隐私权政策">
					隐私权政策
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		post
	} from "@/utils/request.js"

	const agreeStatus = ref(true);

	let userinfo = ref({
		cName: "15980266376",
		cPassword: "123456"
	})

	async function loginClick() {
		if (userinfo.value.cName.length == 0) {
			uni.showToast({
				title: "账号不能为空！",
				icon: 'none'
			})
			return;
		}
		if (userinfo.value.cPassword.length == 0) {
			uni.showToast({
				title: "密码不能为空！",
				icon: 'none'
			})
			return;
		}
		if (!agreeStatus.value) {
			uni.showToast({
				title: "请先阅读并同意《用户协议》和《隐私权政策》！",
				icon: 'none'
			})
			return;
		}
		uni.showLoading({
			title: "处理中...",
		})

		try {
			let userRes = await post("/sysCommonAdmin/login", userinfo.value);
			uni.setStorageSync("userinfo", userRes);
			uni.hideLoading()
			uni.switchTab({
				url: "/pages/index/index"
			})
		} catch (e) {
			uni.hideLoading()
			console.warn(e);
		}
	}

	function agreeClick() {
		agreeStatus.value = !agreeStatus.value
	}
</script>

<style lang="scss" scoped>
	.container {
		background: white;
		height: 100vh;
		padding: 0 40rpx;
	}

	.top-view {
		flex: 1;
		position: relative;
	}

	.bottom-view {
		flex: 1;
		position: relative;
	}

	.wecome {
		margin-top: 80rpx;
		font-size: 38rpx;
	}

	.user {
		width: 100%;
		position: absolute;
		bottom: 30rpx;
	}

	.name {
		height: 88rpx;
		padding-left: 20rpx;
		background-color: $me-color-background;
		border-radius: 4rpx;
		align-items: center;
	}

	.name-image {
		width: 44rpx;
		height: 44rpx;
	}

	.name-input {
		width: 100%;
		height: 100%;
		padding: 0 20rpx;
	}

	.password {
		height: 88rpx;
		margin-top: 20rpx;
		padding-left: 20rpx;
		background-color: $me-color-background;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
	}

	.password-image {
		width: 44rpx;
		height: 44rpx;
	}

	.password-input {
		width: 100%;
		height: 100%;
		padding: 0 20rpx;
	}

	.login {
		height: 88rpx;
		width: 100%;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		background: linear-gradient(to right bottom, #4CCBFF, #33A7FC);
		color: white;
	}

	.findpassword {
		font-size: 26rpx;
		padding: 20rpx 0;
	}

	.agree-view {
		width: 100%;
		position: absolute;
		bottom: 30rpx;
		justify-content: center;
		align-items: center;
	}

	.agree-image {
		width: 60rpx;
		height: 60rpx;
		padding: 10rpx;
	}

	.agree-tip {
		padding: 10rpx 2rpx;
		font-size: 24rpx;
		color: $me-color-gray-2;
	}

	.agree-content {
		padding: 10rpx 2rpx;
		font-size: 24rpx;
		color: $me-color-blue;
	}
</style>